<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>后台商品SKU</title>
    <link href="js/layui/css/layui.css" media="all" rel="stylesheet">
    <style>
        #sku-table thead tr th i,
        #sku-table tbody tr td img {
            cursor: pointer;
        }
    </style>
</head>
<body>
<div class="layuimini-container">
    <div class="layuimini-main">
        <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
            <legend>商品规格</legend>
        </fieldset>
        <div>
            <!--    //商品id-->
            <div class="layui-inline" style="position: relative;top:30px">
                <label class="layui-form-label">商品名称:</label>
                <div class="layui-input-inline">
                    <input class="layui-input" disabled id="commtityName"/>
                    <span style="display:none" id="newcommtityaddspecsID"></span>
                </div>
            </div>
        </div>
        <div  class="layui-form" id="layuiButtonActive">
            <div class="layui-form-item"id="specss_value">
                <div class="layui-btn-group" style="position: absolute;left: 341px;top: 104px">
                    <button type="button" class="layui-btn layui-btn-primary layui-btn-sm" data-method="specsType">
                        <i class="layui-icon">&#xe654;</i>
                    </button>
                </div>
            </div>
        </div>
        <div class="layui-row" >
            <div class="layui-form" id="SKU_TYPE"></div>
            <div id="skuTable"></div>
        </div>
        <button id="skuSubmit" class="layui-btn layui-btn-normal" style="display: block;margin: 0 auto;margin-top: 500px">提交</button>
    </div>
</div>
<script src="js/jquery-3.4.1/jquery-3.4.1.min.js"></script>
<script charset="utf-8" src="js/layui/layui.js"></script>
<script>
    layui.config({
        base: "./js/",
        version: true
    }).extend({
        laySku: 'laySku/laySku', //  Sku
    });
    layui.use(['form', 'layer', 'laySku'], function () {
        var form = layui.form,
            layer = layui.layer,
            laySku = layui.laySku;
        var specsValueData = [];
        var active = {
            specsType: function () {
                layer.open({
                    type: 2,
                    title: '选择规格',
                    shadeClose: true,
                    shade: 0.8,
                    area: ['95%', '96%'],
                    content: "dialog.html", //iframe的url
                    btn: ['确定', '关闭'],
                    yes: function (index, layero) {
                        // 执行子页面 getSpecsData() 函数， 获取数据
                        var SpecsData = window[layero.find('iframe')[0]['name']].getSpecsData();
                        if (SpecsData.id != undefined) {
                            specsValueData.push(SpecsData);
                            setSpecsTabled();
                        }
                        layer.close(index);
                    }
                });
            }
        }
        var arr = [];
        window.setSpecsTabled = function () {
            // 渲染 SKU
            var sku = new laySku({
                id: 'SKU_TYPE',//checkbox选择框
                container_id: 'skuTable',//容器id渲染table
                data: specsValueData,//数据类型
                rowReturn: true,//是否绑定tr单击事件
                // 绑定tr单击事件执行的操作
                rowMaster: function (res) {
                },
                btn: 'skuSubmit',//按钮提交
            })
            sku.init()
        }
        var commotity={
            "isNew":1
        }
        //获取最新商品数据
        $.ajax({
            type : "POST",
            contentType: "application/json; charset=utf-8",
            data: JSON.stringify(commotity),
            dataType: "json",
            url:"/commodity/getList",
            async : true,
            success : function(date){
                if (date.code==0) {
                    $("#newcommtityaddspecsID").val(date.data[0].id)
                    $("#commtityName").val(date.data[0].name)
                }
            }
        })
        $('#layuiButtonActive .layui-btn').on('click', function () {
            var othis = $(this), method = othis.data('method');
            active[method] ? active[method].call(this, othis) : '';
        });

    });
</script>
</body>
</html>
